<script setup lang="ts">

import {ref, onMounted} from 'vue'
import { Search,ArrowDown } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { ElTable } from 'element-plus'
import { ElButton, ElDialog } from 'element-plus'
import router from '@/router'
import { GetUser } from "@/utils/lStorage"

import {formatCreateTime} from "@/utils/format"
import {apiDeviceList, apiGroupList} from '@/api/api'


const searchKey = ref({
  DeviceGroupId:"",
  DeviceGroupName:"",
  Name:"",
  Code:"",
  Status:"",
})
const pageConfig = ref({
  pageNum : 1,
  pageSize :15,
  total:0,

})


const groups = ref([])
async function handlerGroupList(){
  const req = {
    pageSize:100,
  } 
 const data = await apiGroupList(req)
  if (data.CODE != "ok") {
      console.log(data)
      ElMessage.error("执行失败， 请联系管理员")
      return 
  }
  groups.value = data.DATA.DeviceGroupList

}





const deviceList = ref([])

async function handlerDeviceList() {
  const req = {
    _pageNumber:pageConfig.value.pageNum,
    _pageSize:pageConfig.value.pageSize,
  }
  if  (searchKey.value.DeviceGroupId){
    req.DeviceGroupId = searchKey.value.DeviceGroupId
  }
  if  (searchKey.value.DeviceGroupName){
    req.DeviceGroupName = searchKey.value.DeviceGroupName
  }
  if  (searchKey.value.Name){
    req.Name = searchKey.value.Name
  }
  if  (searchKey.value.Code){
    req.Code = searchKey.value.Code
  }
  if  (searchKey.value.Status){
    req.Status = searchKey.value.Status
  }

  const data = await apiDeviceList(req)
  if (data.CODE != "ok") {
      console.log(data)
      ElMessage.error("执行失败， 请联系管理员")
      return 
  }

  pageConfig.value.pageNum = data.DATA.PageNumber
  pageConfig.value.pageCount = data.DATA.PageCount
  pageConfig.value.pageSize = data.DATA.PageSize
  pageConfig.value.total = data.DATA.TotalCount
  deviceList.value = data.DATA.DeviceList
}




// const paramCreate =ref({
//   openFlag: false ,
//   DeviceGroupName:"",
//   Desc:""
// })


// async function handlerGroupCreate() {
//   if (!paramCreate.value.DeviceGroupName){
//       ElMessage.error("请输入分组名称")
//       return 
//   }
//   const data = await apiGroupCreate(paramCreate.value)
//   if (data.CODE != "ok") {
//       console.log(data)
//       ElMessage.error("执行失败， 请联系管理员")
//       return 
//   }

//   ElMessage({
//     message: '创建成功',
//     type: 'success',
//   })

//   handlerGroupList()
//   paramCreate.value = {}
//   return 
// }


// const handleGroupDetail = (item) => {
//   router.push({ path: '/group/detail', query: { "id": item.DeviceGroupId } })
// }

// async function handlerGroupDelete(item)  {
 
//   const req= {
//     DeviceGroupId: item.DeviceGroupId,
//   }
//   const data = await  apiGroupDelete(req)
//   if (data.CODE != "ok") {
//       console.log(data)
//       ElMessage.error("执行失败， 请联系管理员")
//       return 
//   }

//     ElMessage({
//       message: '操作成功！',
//       type: 'success',
//     })
//   handlerGroupList()
    
// }



onMounted(() => {
  handlerGroupList()
  handlerDeviceList()
})

</script>

<template>
  <el-row :gutter="20" justify="space-between" >
    <el-col :span="8">
      <!-- <el-button type="primary" @click="paramCreate.openFlag=true" >添加</el-button> -->
    </el-col>
    <el-col :span="16">
      <el-row justify="end" :gutter="10">
        <el-col  :span="4"> 
            <el-select v-model="searchKey.DeviceGroupId"  placeholder="分组" clearable >
            <el-option
              v-for="status in groups"
              :key="status.DeviceGroupId"
              :label="status.DeviceGroupName"
              :value="status.DeviceGroupId"
            />
          </el-select>
        </el-col>
        <el-col  :span="4"> 
            <el-input v-model="searchKey.Name" placeholder="名称" clearable />
        </el-col>
        <el-col  :span="4"> 
            <el-input v-model="searchKey.Code" placeholder="代号" clearable />
        </el-col>
        <el-col :span="2"> 
          <el-button   class='pagination' type="primary" :icon="Search" @click="handlerDeviceList" >查询</el-button>
        </el-col>
      </el-row>
    </el-col>

  </el-row>

<div class="info_box">
  <el-table :data="deviceList" style="width: 100%">
    <el-table-column prop="DeviceGroupName" label="分组名称" width="300" />
    <el-table-column prop="Name" label="名称" width="300" />
    <el-table-column prop="Code" label="代号" width="300" />
    <el-table-column prop="Desc" label="说明"  />
    <el-table-column prop="Otg" label="OTG" width="300" />
    <el-table-column prop="Ip" label="Ip"  />
    <el-table-column prop="Port" label="端口"  />
    <el-table-column prop="LatestConnect" label="最近访问时间时间" :formatter="formatCreateTime" width="180" />
    <el-table-column prop="CreateTime" label="创建时间" :formatter="formatCreateTime" width="180" />
  </el-table>
  
  <el-pagination class='pagination' size="large" :page-size="pageConfig.pageSize" layout=" prev, pager, next, total" :total="pageConfig.total"
      v-model:current-page="pageConfig.pageNum" @current-change="handlerSkillList" />

</div>

<!-- 
<el-dialog v-model="paramCreate.openFlag" title="添加" :with-header="false">
  <div class="info_box">
    
  <el-form :model="paramCreate" label-width="120px">
    <el-form-item label="名称">
      <el-input v-model="paramCreate.DeviceGroupName" clearable/>
    </el-form-item>

  <el-form-item label="说明">
      <el-input v-model="paramCreate.Desc"     
        autosize
        clearable
      type="textarea"
      placeholder="配置说明"/>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="handlerGroupCreate">提交</el-button>
      <el-button @click="paramCreate.openFlag=false">取消</el-button>
    </el-form-item>
   </el-form>
  </div>

  </el-dialog> -->


</template>

<style scoped>

.pagination {
  float: right;
}

.right_button{
  float: right;
}
.box_create{
/*   padding: 3em; */
  width: 300px;
}

</style>